$(function() {
  // 图表1 ：
  //  创建echarts 实例， 指定图表父元素
  var myChart = echarts.init(document.getElementById("c1"));

  // 指定图表相关数据 和  设置
  var option = {
    // 标题
    title: {
      text: "2020年注册人数"
    },
    // 提示工具
    tooltip: {},
    // 图例
    legend: {
      data: ["注册人数", "销量"]
    },
    // x 轴
    xAxis: {
      data: ["一月", "二月", "三月", "四月", "五月", "六月"]
    },
    // y 轴， 一般不用设置，会自动智能生成
    yAxis: {},
    // 系列
    series: [
      {
        name: "注册人数", // 数据名称
        type: "bar",
        data: [5, 20, 136, 10, 10, 20]
      },
      {
        name: "销量",
        type: "line",
        data: [15, 120, 86, 40, 20, 33]
      }
    ]
  };

  // 把准备好的数据 option 交给表进行显示
  myChart.setOption(option);

  // 图表1 ：
  //  创建echarts 实例， 指定图表父元素
  var myChart2 = echarts.init(document.getElementById("c2"));

  // 指定图表相关数据 和  设置
  var option2 = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      x: "left",
      data: ["阿迪王", "耐克", "新百伦", "李宁", "老北京布鞋"]
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center"
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold"
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: "阿迪王" },
          { value: 310, name: "耐克" },
          { value: 234, name: "新百伦" },
          { value: 135, name: "李宁" },
          { value: 1548, name: "老北京布鞋" }
        ]
      }
    ]
  };

  // 把准备好的数据 option 交给表进行显示
  myChart2.setOption(option2);
});
